
<template>
  <el-dialog
      title="历史审核记录"
      :visible.sync="visible"
      :append-to-body="true"
      width="900px"
      custom-class="history-review-dialog"
      @opened="onOpened"
      @closed="onClosed"
  >
    <!-- 筛选表单 -->
    <el-form :inline="true" :model="searchForm" size="small" style="margin-bottom: 15px;">
      <el-form-item label="审核结果">
        <el-select v-model="searchForm.status" placeholder="请选择" clearable @change="handleSearch">
          <el-option label="全部" value=""></el-option>
          <el-option label="官员审核通过" value="SUBMIT"></el-option>
          <el-option label="官员审核驳回" value="ERROR"></el-option>
          <el-option label="财务复审通过" value="SUCCESS"></el-option>
          <el-option label="财务复审驳回" value="REJECTED"></el-option>
        </el-select>


      </el-form-item>

      <el-form-item label="审核人">
        <el-input
            v-model="searchForm.operatorName"
            placeholder="请输入审核人"
            clearable
            @keyup.enter.native="handleSearch"
            style="width: 150px;"
        ></el-input>
      </el-form-item>

<!--      <el-form-item label="审核部门">-->
<!--        <el-select v-model="searchForm.department" placeholder="请选择" clearable @change="handleSearch">-->
<!--          <el-option label="全部" value=""></el-option>-->
<!--          <el-option label="项目部" value="项目部"></el-option>-->
<!--          <el-option label="财务部" value="财务部"></el-option>-->
<!--          <el-option label="采购部" value="采购部"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
        :data="tableData"

        stripe
        style="width: 100%;"
        v-loading="loading"
    >
      <el-table-column prop="createTime" label="审核时间" width="160" align="center">
      </el-table-column>

      <el-table-column prop="status" label="审核结果" width="120" align="center">
        <template #default="scope">
          <el-tag
              :type="(REVIEW_STATUS_MAP[scope.row.status] || { type: 'info' }).type"
              size="mini"
          >
            {{ (REVIEW_STATUS_MAP[scope.row.status] || { label: scope.row.status }).label }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="remark" label="驳回原因/通过原因" min-width="200">
        <template slot-scope="scope">
          {{ scope.row.remark || '--' }}
        </template>
      </el-table-column>

      <el-table-column prop="operatorName" label="审核人" width="120" align="center" />
<!--      <el-table-column prop="department" label="审核部门" width="120" align="center" />-->
    </el-table>

    <!-- 分页 -->
<!--    <div class="pagination" style="margin-top: 15px; text-align: right">-->
<!--      <el-pagination-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--          :current-page="pagination.current"-->
<!--          :page-sizes="[5, 10, 20, 50]"-->
<!--          :page-size="pagination.size"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="pagination.total"-->
<!--      >-->
<!--      </el-pagination>-->
<!--    </div>-->

    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="small">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {
  getSpendingOrderFileLogList
} from '@/request/api'

export default {
  name: 'HistoryReviewDialog',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    // 文件/订单 ID，用于查询审核日志
    fileId: {
      type: Number,
      required: true // 强制传入 fileId
    }
  },
  data() {
    return {

      REVIEW_STATUS_MAP: {
        SUBMIT: { label: '官员审核通过', type: 'primary' },
        ERROR: { label: '官员审核驳回', type: 'warning' },
        SUCCESS: { label: '财务复审通过', type: 'success' },
        REJECTED: { label: '财务复审驳回', type: 'danger' }
        // 如果后端字段不同，请对应调整 key
      },



      loading: false,
      // 搜索表单
      searchForm: {
        status: '',
        operatorName: '',
        // department: ''
      },
      // 表格数据
      tableData: [],
      // 分页信息
      pagination: {
        current: 1,
        size: 10,
        total: 0
      }
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    // 对话框打开时触发
    onOpened() {
      this.fetchData();
    },

    // 关闭后重置
    onClosed() {
      this.resetSearch();
    },

    // 获取数据
    fetchData() {
      this.loading = true;
      const params = {
        fileId: this.fileId,
        current: this.pagination.current,
        size: this.pagination.size,
        ...this.searchForm
      };

      getSpendingOrderFileLogList(params).then((res) => {
            // const { code, data } = res.data.data || res.data;
            this.tableData = res.data || [];
            // this.pagination.total = total;
          })
          .catch((err) => {
            this.$message.error('获取审核记录失败：' + (err.message || '未知错误'));
            this.tableData = [];
            // this.pagination.total = 0;
          })
          .finally(() => {
            this.loading = false;
          });
    },

    // 查询
    handleSearch() {
      this.pagination.current = 1; // 回到第一页
      this.fetchData();
    },

    // 重置
    resetSearch() {
      this.searchForm = {
        status: '',
        operatorName: '',
        // department: ''
      };
      this.pagination.current = 1;
      this.fetchData();
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.pagination.size = val;
      this.fetchData();
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.current = val;
      this.fetchData();
    }
  },
  filters: {
    formatDate(dateStr) {
      if (!dateStr) return '--';
      const date = new Date(dateStr);
      const Y = date.getFullYear();
      const M = String(date.getMonth() + 1).padStart(2, '0');
      const D = String(date.getDate()).padStart(2, '0');
      const h = String(date.getHours()).padStart(2, '0');
      const m = String(date.getMinutes()).padStart(2, '0');
      const s = String(date.getSeconds()).padStart(2, '0');
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    }
  }
};
</script>

<style lang="scss" scoped>
.history-review-dialog .el-dialog__body {
  padding: 10px 20px 0;
}
</style>